<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML Test</title>

<script type="text/javascript">
function drawLine(xa,ya,xb,yb)

{
	/*@cc_on @*/
	/*@if (@_jscript_version >= 4)
	var A = [xa,ya];
	var B = [xb,yb];
	var myLine = document.getElementById('line01');
	myLine.from = A;
	myLine.to = B;
	/*@end @*/
}

</script>

<style type="text/css">
	v\:* { behavior: url(#default#VML);}
	body { background-color: #FFFFFF}
</style>





<SCRIPT LANGUAGE="JavaScript">


function showimg(form)
{
adres = form.image_file.value;
index = adres.indexOf(".gif");
index = index + adres.indexOf(".jpg");
index = index + adres.indexOf(".bmp");
if (form.image_file.value == "")
  {alert("No Image found!");}
else
  {if (index == -3){alert("Unknow image type");
    form.width.value=0;
    form.height.value=0;}
  else
    {
    var img_obj = new Image();
    img_obj = form.image_file.value;
    document.changing.src = img_obj;
    document.changing2.src= img_obj;
    document.changing.width = document.changing2.width;
    document.changing.height = document.changing2.height;
    set();
}
  }
}
fast = 0;
change = 0;



function upw(){
  document.image.width.value=parseInt(document.image.width.value)+100;
  resize();}



function over_upw(){upw();
  change = 1;
  changetime = setTimeout("fast_upw()","600");}



function fast_upw(){clearTimeout(changetime);
  upw();
  fast = setTimeout("fast_upw()","100");}


function clt(){
if (change == 1){clearTimeout(changetime);}
clearTimeout(fast);
change = 0;
}



function resize()  {document.changing.height = document.image.height.value;
  document.changing.width = document.image.width.value;}



function downw(){document.image.width.value=parseInt(document.image.width.value)-100;
  resize();}




function over_downw(){downw();
  change = 1;
  changetime = setTimeout("fast_downw()","600");}


function fast_downw(){clearTimeout(changetime);
  downw();
  fast = setTimeout("fast_downw()","100");}


function uph(){document.image.height.value=parseInt(document.image.height.value)+100;
 resize();}


function over_downh(){downh();
  change = 1;
  changetime = setTimeout("fast_downh()","600");}


function fast_downh(){clearTimeout(changetime);
  downh();
  fast = setTimeout("fast_downh()","100");}


function over_uph(){uph();
  change = 1;
  changetime = setTimeout("fast_uph()","600");}


function fast_uph(){clearTimeout(changetime);
  uph();
  fast = setTimeout("fast_uph()","100");}


function downh(){document.image.height.value=parseInt(document.image.height.value)-100;
  resize();}


function set(){
  document.image.width.value=document.changing.width;
  document.image.height.value=document.changing.height;}

</script>

</HEAD>



<BODY onLoad="set();">


<v:fill
color="#FFFFFF"/>
<v:stroke
color="#000000"
weight="4px"/>
</v:rect>
<v:line id="line01">
</v:line>
</v:group>
<script type="text/JScript">
self.isVMLEnabled = true;
</script>



<center>
<form name="image">
		<input type="hidden" name="width" size="4" readonly>
		<input type="hidden" name="height" size="4" readonly>


		<div id=img>
			<img src="cropped_whatever.jpg" name="changing">
		</div>

</form>


<input type=button value="Zoom (+)" OnClick="document.image.height.value=parseInt(document.image.height.value)+50;document.image.width.value=parseInt(document.image.width.value)+50;resize();drawLine((document.getElementById('img').offsetWidth/2),1,(document.getElementById('img').offsetWidth/2),(document.getElementById('img').offsetHeight));">

<input type=button value="Zoom (-)" OnClick="document.image.height.value=parseInt(document.image.height.value)-50;document.image.width.value=parseInt(document.image.width.value)-50;resize();drawLine((document.getElementById('img').offsetWidth/2),1,(document.getElementById('img').offsetWidth/2),(document.getElementById('img').offsetHeight));">

<input type=button value=Linha OnClick=drawLine((document.getElementById('img').offsetWidth/2),1,(document.getElementById('img').offsetWidth/2),(document.getElementById('img').offsetHeight));>

